<template>
  <el-dialog
    width="70%"
    :title="$t('dialog.diaEmp')"
    v-model="dialogEmpVisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <el-container>
      <el-main class="el-main-tree">
        <div class="tree_container">
          <table-componets-vue
            ref="dialogEmpTable"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :maxheight="320"
            :Select="
              paramters.fieldKey.selectType == 0 ? 'SingeSelect' : 'MultiSelect'
            "
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          :size="'small'"
          type="danger"
          icon="el-icon-back"
          @click="
            dialogEmpVisible = false;
            initList();
          "
          >{{ $t("table.Global_Cancel") }}</el-button
        >
        <el-button
          :size="'small'"
          type="primary"
          icon="el-icon-check"
          @click="confirm"
          >{{ $t("table.Global_Save") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../../components/TableComponets";
import confVue from "../../utils/conf.vue";
export default {
  emits: ["confirmEvent"],
  props: {},
  data() {
    return {
      dialogEmpVisible: false,
      showCheckBox: false,
      expandAll: true,
      tableLoading: false,
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
        paramters: [],
      },
      paramters: { data: [] },
    };
  },
  components: { TableComponetsVue },
  methods: {
    InitData() {
      this.InitTable(this.query);
    },
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.paramters = [];
      if (this.paramters.node.approvalRangeType == 1) {
        this.query.paramters.push({
          label: "position",
          value: this.paramters.node.nextStepApprover,
        });
      }
      if (this.paramters.node.approvalRangeType == 2) {
        this.query.paramters.push({
          label: "personal",
          value: this.paramters.node.nextStepApprover,
        });
      }
      this.query.useDisabledData = false;
      reqVue.$Post(this.query, "emp/v1.0/flowemp").then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
            this.$nextTick(function() {
              this.$refs.dialogEmpTable.InitCheckBox(
                this.paramters.data,
                "empId"
              );
            });
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(this.paramter, queyModel);
    },
    confirm() {
      let results = this.$refs.dialogEmpTable.tableResult;
      let pers = [];
      results.forEach((element) => {
        pers.push({
          empId: element.empId,
          empCode: element.empCode,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.initList();
      this.dialogEmpVisible = false;
      this.$emit("confirmEvent", {
        key: this.paramters.fieldKey,
        result: pers,
      });
    },
    initList() {
      this.$refs.dialogEmpTable.dels = [];
      this.$refs.dialogEmpTable.curs = [];
      this.$refs.dialogEmpTable.tableResult = [];
    },
  },
};
</script>
